<template>
	<view class="order">
		<u-sticky zIndex="99">
			<u-subsection :current="defaultIndex" :list="orderStatusList" keyName="label" activeColor="#ffffff"
				@change="orderSubsectionChange" />
		</u-sticky>
		<view class="order-list">
			<view v-for="(item, index) in tableData" :key="index" class="order-list-item mb20">
				<view class="order-list-item-header flex" style="justify-content: space-between;">
					<view class="flex">
						<u--image :showLoading="true" :src="item.admin.avatar[0].url" width="80rpx" height="80rpx"
							radius="10rpx" @click="toAdmin(item.adminId)" />
						<view class="flex fs14 ml5" style="color: #606266" @click="toAdmin(item.adminId)">
							<text>{{ item.admin.userName || '未命名店铺' }}</text>
							<u-icon name="arrow-right" color="#606266" />
						</view>
					</view>
					<view class="fs14" style="color:#ea64a2 ;">
						{{ item.orderStatus | setOrderStatusText }}
					</view>
				</view>
				<u-line />
				<view class="order-list-item-content" style="color: #606266">
					<u--image :showLoading="true" :src="item.goods.iconId[0].url" width="200rpx" height="200rpx"
						radius="10rpx" @click="toGoodsDetails(item.goodsId)" />
					<view class="order-list-item-content-right ml10">
						<text class="u-line-1 fs14"
							@click="toGoodsDetails(item.goodsId)">{{ item.goods.name || '未命名商品' }}</text>
						<view class="flexCol mt10 mb10" style="color: #909399;">
							<view v-for="value in item.sku_list" :key="value.id"
								class="order-list-item-content-right-sku u-line-1 fs13 mb10">
								<text>{{ value.sku_name_arr.toString() }}</text>
								<text class="ml5">x{{ value.cart_num }}</text>
							</view>
						</view>
						<view style="color: #ff4b02">
							<text class="fs12">￥</text>
							<text class="fs18">{{ item.sku_list | skuListPrice }}</text>
						</view>
					</view>
				</view>
				<view class="order-list-item-footer fs13">
					<text style="color: #909399;">订单备注: </text>
					<text class="ml5" style="color: #606266;">{{ item.descText || '该订单未填写备注' }}</text>
				</view>
				<u-line />
				<view class="order-list-item-menu flex">
					<view class="flex">
						<u-button v-if="item.orderStatus === 'YQX' || item.orderStatus === 'DPJ'" type="error"
							:plain="true" :hairline="true" text="删除订单" @click="removeOrder(item)" />
						<u-button v-if="item.orderStatus === 'DFH' || item.orderStatus === 'DSH'" color="#82848a"
							:plain="true" :hairline="true" text="取消订单" @click="cancelOrder(item)" />
						<u-button v-if="item.orderStatus === 'DFK'" color="#ea64a2" :plain="true" :hairline="true"
							text="付  款" @click="openPayPopup(item)" />
						<u-button v-if="item.orderStatus === 'DSH'" color="#ea64a2" :plain="true" :hairline="true"
							text="确认收货" @click="confirmOrder(item)" />
						<u-button v-if="item.orderStatus === 'DPJ'" color="#ea64a2" :plain="true" :hairline="true"
							text="立即评价" @click="evaluateOrder(item)" />
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="indexStatus" loadmoreText="点击加载更多" loadingText="努力加载中"
			nomoreText="实在没有了" />
		<u-popup :show="payPopup.visible" closeable :round="10" @close="closePayPopup">
			<view class="order-payPopup">
				<view class="order-payPopup-header flexCenter fs18 mb20">
					付款详情
				</view>
				<view class="order-payPopup-content">
					<view v-for="(item, index) in payPopup.orderId" :key="index"
						class="order-payPopup-content-item flex">
						<text class="labelColor" style="flex: 0 0 30%;">订单信息 {{ index === 0 ? '' : index + 1 }}</text>
						<text class="valueColor u-line-1">订单号{{ item.orderId }}</text>
					</view>
					<view class="order-payPopup-content-item flex">
						<text class="labelColor">支付账号</text>
						<text class="valueColor u-line-1">{{ userInfo.phone || '未绑定手机号' }}</text>
					</view>
					<view class="order-payPopup-content-item flex">
						<text class="labelColor">支付方式</text>
						<text class="valueColor u-line-1">虚拟支付</text>
					</view>
					<view class="order-payPopup-content-item flex">
						<text class="valueColor fs16">需付款</text>
						<text class="u-line-1 fs18" style="color: #303133;">{{ payPopup.orderTotalPrices }}元</text>
					</view>
					<view class="order-payPopup-content-menu mt40">
						<u-button text="确认付款" @click="confirmPay" />
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import setSkuData from "@/utils/set_Sku_data.js";
	import {
		mapGetters
	} from 'vuex';
	export default {
		name: "Order",
		mixins: [setSkuData],
		options: {
			styleIsolation: "shared"
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		filters: {
			// 计算单个商品里所有sku规格价格
			skuListPrice(sku_list) {
				const prices = sku_list.map(item => item.price * item.cart_num)
				return prices.length > 0 ? prices.reduce((n, m) => n + m).toFixed(2) : 0
			},
			// 订单状态文案
			setOrderStatusText(type) {
				switch (type) {
					case 'YQX':
						return '订单已取消'
					case 'DFK':
						return '等待买家付款'
					case 'DFH':
						return '等待卖家发货'
					case 'DSH':
						return '卖家已发货'
					case 'DPJ':
						return '交易成功，待评价'
					case 'YWC':
						return '交易成功'
					default:
						return '状态异常'
				}
			},
		},
		data() {
			return {
				indexStatus: "loadmore", // 首页下拉加载状态
				orderStatusList: [{
						label: "全 部",
						value: ""
					},
					{
						label: "待付款",
						value: "DFK"
					},
					{
						label: "待发货",
						value: "DFH"
					},
					{
						label: "待收货",
						value: "DSH"
					},
					{
						label: "待评价",
						value: "DPJ"
					},
				],
				defaultIndex: 0, // 默认选择索引
				listQuery: {
					page: 1,
					size: 8,
					total: 0,
					pageNum: 0,
					orderStatus: "",
				},
				tableData: [], // 主数据
				payPopup: { // 支付对话框
					id: '', // 订单id
					visible: false,
					orderId: [], // 订单号
					orderTotalPrices: 0, // 当前支付订单总价
				}
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		watch: {
			// 赋值订单状态
			defaultIndex: {
				handler(n) {
					this.listQuery.orderStatus = this.orderStatusList[n].value;
					this.resetListQuery()
					this.getList()
				},
				immediate: true,
			},
		},
		onShow() {
			const routes = getCurrentPages()
			const orderStatus = routes[routes.length - 1]?.options?.orderStatus
			switch (orderStatus) {
				case 'DFK':
					this.defaultIndex = 1
					break;
				case 'DFH':
					this.defaultIndex = 2
					break
				case 'DSH':
					this.defaultIndex = 3
					break
				case 'DPJ':
					this.defaultIndex = 4
					break
			}
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			if (this.listQuery.page === this.listQuery.pageNum) {
				// 已到最后一页
				this.indexStatus = "nomore";
				return;
			}
			this.indexStatus = "loading "; // 开始加载
			this.listQuery.page = this.listQuery.page + 1;
			this.getList();
		},
		methods: {
			// 重置页面查询残数
			resetListQuery() {
				let orderStatus = ''
				switch (this.defaultIndex) {
					case 1:
						orderStatus = 'DFK'
						break;
					case 2:
						orderStatus = 'DFH'
						break
					case 3:
						orderStatus = 'DSH'
						break
					case 4:
						orderStatus = 'DPJ'
						break
				}
				this.listQuery = {
					page: 1,
					size: 8,
					total: 0,
					pageNum: 0,
					orderStatus,
				}
				this.tableData = [] // 主数据
			},
			// 确认付款
			async confirmPay() {
				const {
					code
				} = await this.$order.orderChangeOrderStatus({
					id: this.payPopup.id,
					orderStatus: 'DFH'
				})
				if (code === 0) {
					this.showToast('支付成功')
					this.closePayPopup()
					this.resetListQuery()
					this.getList()
				}
			},
			// 关闭支付对话框
			closePayPopup() {
				this.payPopup = { // 支付对话框
					id: '', // 订单id
					visible: false,
					orderId: [], // 订单号
					orderTotalPrices: 0, // 当前支付订单总价
				}
			},
			// 打开支付对话框
			openPayPopup(item) {
				const prices = item.sku_list.map(item => item.price * item.cart_num)
				const orderTotalPrices = prices.length > 0 ? prices.reduce((n, m) => n + m).toFixed(2) : 0
				this.payPopup = { // 支付对话框
					id: item.id, // 订单id
					visible: true,
					orderId: [{
						orderId: item.orderId
					}], // 订单号
					orderTotalPrices // 当前支付订单总价
				}
				console.log(this.payPopup)
			},
			// 删除订单
			removeOrder({
				id
			}) {
				uni.showModal({
					title: '删除订单',
					content: '是否确认执行该操作',
					confirmColor: "#ea64a2",
					success: async (res) => {
						if (res.confirm) {
							const {
								code
							} = await this.$order.orderDeleteOrder({
								id
							})
							if (code === 0) {
								this.showToast('删除成功')
								this.resetListQuery()
								this.getList()
							}
						}
					}
				})
			},
			// 取消订单
			cancelOrder({
				id
			}) {
				uni.showModal({
					title: '取消订单',
					content: '是否确认执行该操作',
					confirmColor: "#ea64a2",
					success: async (res) => {
						if (res.confirm) {
							const {
								code
							} = await this.$order.orderChangeOrderStatus({
								id,
								orderStatus: 'YQX'
							})
							if (code === 0) {
								this.showToast('取消成功')
								this.resetListQuery()
								this.getList()
							}
						}
					}
				})
			},
			// 确认订单
			confirmOrder({
				id
			}) {
				uni.showModal({
					title: '确认收货',
					content: '是否确认执行该操作',
					confirmColor: "#ea64a2",
					success: async (res) => {
						if (res.confirm) {
							const {
								code
							} = await this.$order.orderChangeOrderStatus({
								id,
								orderStatus: 'DPJ'
							})
							if (code === 0) {
								this.showToast('收货成功')
								this.resetListQuery()
								this.getList()
							}
						}
					}
				})
			},
			// 跳转到带待评价
			evaluateOrder({
				orderId,
				adminId,
				goodsId
			}) {
				uni.navigateTo({
					url: `/pages/order/evaluate/index?orderId=${orderId}&adminId=${adminId}&goodsId=${goodsId}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 分段器选项发生改变时触发
			orderSubsectionChange(index) {
				this.defaultIndex = index;
			},
			// 初始化
			async getList() {
				const {
					data,
					code
				} = await this.$order.orderGetStatusList(
					this.listQuery
				);
				if (code === 0) {
					this.listQuery.total = data.total;
					this.listQuery.pageNum = data.pageNum;
					this.tableData.push(...this.setSku(data.list)); // 转化sku格式
					this.indexStatus = this.listQuery.page === this.listQuery.pageNum ? 'nomore' : 'loadmore' // 下拉加载判断
					console.log(this.tableData, 'this.tableData')
				}
			},
			// 转化sku格式
			setSku(data) {
				data.forEach((item) => {
					if (item.none_sku) {
						item.goods['cart_num'] = item.list[0].cart_num // 替换成已选择的组合列表（无规格只有一个组合列表数据）
						// 无规格商品
						item["sku_list"] = this.setSku_list(item.goods, "none");
						item["spec_list"] = this.setSpec_list(item.goods.skuList, "none");
					} else {
						item.goods['list'] = item.list // 替换成已选择的组合列表
						// 多规格商品
						item["sku_list"] = this.setSku_list(item.goods);
						item["spec_list"] = this.setSpec_list(item.goods.skuList);
					}
				});
				return data
			},
			// 跳转到商品详情
			toGoodsDetails(id) {
				uni.navigateTo({
					url: `/pages/goodsDetails/goodsDetails?goodsId=${id}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 跳转到店铺页
			toAdmin(adminId) {
				uni.navigateTo({
					url: `/pages/adminUser/adminUser?adminId=${adminId}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}

		},
	};
</script>

<style lang="scss" scoped>
	.labelColor {
		color: #909399;
	}

	.valueColor {
		color: #606266;
	}

	.order {
		/deep/ .u-subsection {
			background-color: #fff !important;

			&--button {
				height: 36px;

				&__bar {
					background-color: $uni-color-primary;
				}
			}
		}

		&-list {
			padding: 20rpx;

			&-item {
				background-color: #fff;
				border-radius: 8rpx;
				padding: 5rpx 10rpx;

				&-content {
					padding: 10rpx 0;
					display: flex;

					&-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&-sku {
							background-color: rgba(0, 0, 0, .15);
							width: fit-content;
							padding: 4rpx 8rpx;
						}
					}
				}

				&-footer {
					padding: 5rpx 10rpx;
				}

				&-menu {
					justify-content: right;
					padding: 8rpx 0;

					/deep/ .u-button {
						width: fit-content;
						height: initial !important;
						padding: 6rpx 16rpx !important;
						margin-right: 10rpx;
					}
				}
			}
		}

		&-payPopup {
			padding: 20rpx 30rpx;

			&-header {
				padding-top: 20rpx;
			}

			&-content {
				&-item {
					padding: 15rpx 0;
					justify-content: space-between;
				}

				&-menu {
					/deep/ .u-button {
						background-color: $uni-color-primary;
						color: #fff;
					}
				}
			}
		}
	}
</style>
